<div class="options">
  <a
    mat-raised-button
    href="https://github.com/tiberiuzuld/angular-gridster2/tree/master/src/app/sections/drag"
    target="_blank"
    class="source-code-button"
  >
    <mat-icon>open_in_new</mat-icon>
    Source
  </a>
  <markdown [src]="'assets/drag.md'"></markdown>
</div>
@if (options.draggable) {
  <div class="options-header">
    <mat-checkbox [(ngModel)]="options.draggable.enabled" (ngModelChange)="changedOptions()"> Drag Items </mat-checkbox>
    <mat-checkbox [(ngModel)]="options.pushItems" (ngModelChange)="changedOptions()"> Push Items </mat-checkbox>
    <mat-checkbox [(ngModel)]="options.draggable.dropOverItems" (ngModelChange)="changedOptions()"> Allow Drop Over Items </mat-checkbox>
    <mat-checkbox [(ngModel)]="options.draggable.ignoreContent" (ngModelChange)="changedOptions()"> Ignore Content </mat-checkbox>
    <mat-checkbox [(ngModel)]="options.disableScrollVertical" (ngModelChange)="changedOptions()"> Disable Vertical Scroll </mat-checkbox>
    <mat-checkbox [(ngModel)]="options.disableScrollHorizontal" (ngModelChange)="changedOptions()"> Disable Horizontal Scroll </mat-checkbox>
    <mat-checkbox [(ngModel)]="options.enableBoundaryControl" (ngModelChange)="changedOptions()"> Enable Boundary Control </mat-checkbox>
    <mat-form-field>
      <mat-label>Delay Start ms</mat-label>
      <input matInput [(ngModel)]="options.draggable.delayStart" type="number" (ngModelChange)="changedOptions()" />
    </mat-form-field>
    <mat-form-field>
      <mat-label>Drag Handle Class</mat-label>
      <input matInput [(ngModel)]="options.draggable.dragHandleClass" type="text" (ngModelChange)="changedOptions()" />
    </mat-form-field>
    <mat-form-field>
      <mat-label>Ignore Content Class</mat-label>
      <input matInput [(ngModel)]="options.draggable.ignoreContentClass" type="text" (ngModelChange)="changedOptions()" />
    </mat-form-field>
    <button mat-mini-fab (click)="addItem()" class="add-button cols-2">
      <mat-icon>add</mat-icon>
    </button>
  </div>
}

<gridster [options]="options">
  @for (item of dashboard; track item.id) {
    <gridster-item [item]="item">
      <div class="button-holder">
        @if (item.hasContent) {
          <div class="gridster-item-content">
            <div class="stuff">
              <span>Some content to select and click without dragging the widget</span>
              <a href="https://www.google.com" target="_blank">Link to Google</a>
            </div>
          </div>
        }
        @if (item.hasContent) {
          <div class="item-buttons">
            <button class="drag-handler" mat-icon-button>
              <mat-icon>open_with</mat-icon>
            </button>
            <button mat-icon-button class="remove-button" (mousedown)="removeItem($event, item)" (touchstart)="removeItem($event, item)">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        }
        @if (!item.hasContent) {
          <label>{{ item.label }}</label>
        }
        @if (!item.hasContent) {
          <button mat-mini-fab (mousedown)="removeItem($event, item)" (touchstart)="removeItem($event, item)">
            <mat-icon>delete</mat-icon>
          </button>
        }
      </div>
    </gridster-item>
  }
</gridster>
